<template>
  <div id="data-screen">
    <full-screen-container>
      <Header />
      <border-box-13 class="main-container">
        <div class="left-container">
          <Left />
        </div>
        <div class="center-container">
          <CenterCon />
        </div>
        <div class="right-container">
          <Right />
        </div>
      </border-box-13>
    </full-screen-container>
  </div>
</template>

<script setup lang="ts">
import { FullScreenContainer, BorderBox13 } from '@kjgl77/datav-vue3';
import Header from './components/Header.vue';
import Left from './components/left/index.vue';
import Right from './components/right/index.vue';
import CenterCon from './components/center/index.vue';
</script>

<style lang="scss" scoped>
#data-screen {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  #dv-full-screen-container {
    background-image: url('./img/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-container {
    position: reactive;
    height: calc(100vh - 64px);
    ::v-deep .border-box-content {
      padding: 15px;
      box-sizing: border-box;
      display: flex;
    }
  }
  .left-container,
  .right-container {
    width: 26%;
    height: 100%;
  }
  .center-container {
    flex: 1;
    width: 48%;
  }
}
</style>
